<template>
    <section class="mydiary">
        <Header style="z-index:1025">
            <header-menu></header-menu>
        </Header>
        <user-top></user-top>
        <user-nav :list="list"></user-nav>
        <div class="container clearfix">
             <div class="left mydiary-box">
                 <side-user style="margin-bottom: 10px"></side-user>
                 <side-list :list="sidelist"></side-list>
                 <img src="../../assets/meirong1.jpg" alt="">
                 <div class="answer">
                  <div class="answer-title">
                    TA参与的问答 <span>更多>></span>
                  </div>
                     <div class="answer-text">
                       <p>
                           <span>问</span>
                           <span>鼻综合一周，为什么笑容僵硬，上嘴唇不露齿？</span>
                       </p>
                         <p>
                             <span>答</span>
                             <span>崔医生：做完鼻子一般都会肿，笑起来面部僵硬属于正常，如果还是觉得不适。可以去医院复查</span>
                         </p>
                         <div style="clear: both"></div>
                     </div>
                     <div class="answer-text">
                         <p>
                             <span>问</span>
                             <span>鼻综合一周，为什么笑容僵硬，上嘴唇不露齿？</span>
                         </p>
                         <p>
                             <span>答</span>
                             <span>崔医生：做完鼻子一般都会肿，笑起来面部僵硬属于正常，如果还是觉得不适。可以去医院复查</span>
                         </p>
                          <div style="clear: both"></div>
                     </div>
                     <div class="answer-text">
                         <p>
                             <span>问</span>
                             <span>鼻综合一周，为什么笑容僵硬，上嘴唇不露齿？</span>
                         </p>
                         <p>
                             <span>答</span>
                             <span>崔医生：做完鼻子一般都会肿，笑起来面部僵硬属于正常，如果还是觉得不适。可以去医院复查</span>
                         </p>
                         <div style="clear: both"></div>
                     </div>
                     <div style="clear: both"></div>
                 </div>
             </div>
            <div class="right mydiary-right">
                <router-view></router-view>
                <div class="mydiary-title">
                    TA的日记
                </div>
              <my-diary></my-diary>
              <product-Nav :navList="i" v-for="(i, k) in navList" :key="k" :width="218"></product-Nav>
            </div>
            <product-Nav :navList="i" v-for="(i, k) in navList1" :key="k"></product-Nav>
        </div>
        <bottom-icon></bottom-icon>
        <Footer>
            <page-footer></page-footer>
        </Footer>
    </section>
</template>

<script>
    import HeaderMenu from '@/components/Header/'
    import PageFooter from '../../components/Footer/'
    import BottomIcon from '../../components/BottomIcon/'
    import UserTop from '../../components/Usertop/'
    import MyDiary from '../../components/Usertop/MyDiary'
    import UserNav from '../../components/Usertop/userNav'
    import SideUser from "@/components/My/UserInfo/SideUserinfo"
    import SideList from "@/components/SideMenu/SideList"
    import productNav from "@/components/ProductNav/"

    export default {
        name: "Mydiary",
        components: {
            PageFooter,
            BottomIcon,
            HeaderMenu,
            UserTop,
            UserNav,
            SideUser,
            SideList,
            MyDiary,
            productNav
        },
        data () {
            return {
                sidelist: [
                    {
                        id: 1,
                        name: '竞价排名',
                        child: [
                            {id: 1,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 2,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 3,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 4,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                    {
                        id: 2,
                        name: '大家正在预约',
                        child: [
                            {id: 21,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 22,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 23,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 24,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                    {
                        id: 3,
                        name: '新品推荐',
                        child: [
                            {id: 21,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 22,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 23,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 24,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                ],
                navList: [
                    {id: 1, title: 'TA预约过的项目',type:1,
                        child:[
                            {
                                evaluate:2.0,
                                price:9999,
                                oldPrice:12323,
                                delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                                jiGou:'美橙医疗整形美容',
                                num:22,
                            },
                            {
                                evaluate:2.0,
                                price:9999,
                                oldPrice:12323,
                                delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                                jiGou:'美橙医疗整形美容',
                                num:22,
                            },
                            {
                                evaluate:2.0,
                                price:9999,
                                oldPrice:12323,
                                delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                                jiGou:'美橙医疗整形美容',
                                num:22,
                            },
                            {
                                evaluate:2.0,
                                price:9999,
                                oldPrice:12323,
                                delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                                jiGou:'美橙医疗整形美容',
                                num:22,
                            },
                        ]

                    },
                    {id: 2, title: '为TA手术过的医生',type:2,
                        child:[
                            {
                                doctor:'周一围',
                                physician:'主治医生',
                                department:'粉红宝宝医疗美容门诊部',
                                good :'脸部、鼻部、面部轮廓',
                                img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',
                            },
                            {
                                doctor:'周一围',
                                physician:'主治医生',
                                department:'粉红宝宝医疗美容门诊部',
                                good :'脸部、鼻部、面部轮廓',
                                img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',
                            },
                            {
                                doctor:'周一围',
                                physician:'主治医生',
                                department:'粉红宝宝医疗美容门诊部',
                                good :'脸部、鼻部、面部轮廓',
                                img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',
                            },
                        ]

                    },
                ],
                navList1: [
                    {id: 1, title: '猜你喜欢',type:1,child:[
                            {
                                evaluate:2.0,
                                price:9999,
                                oldPrice:12323,
                                delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                                jiGou:'美橙医疗整形美容',
                                num:22
                            },
                            {
                                evaluate:2.0,
                                price:9999,
                                oldPrice:12323,
                                delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                                jiGou:'美橙医疗整形美容',
                                num:22
                            },
                            {
                                evaluate:2.0,
                                price:9999,
                                oldPrice:12323,
                                delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                                jiGou:'美橙医疗整形美容',
                                num:22
                            },
                            {
                                evaluate:2.0,
                                price:9999,
                                oldPrice:12323,
                                delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                                jiGou:'美橙医疗整形美容',
                                num:22
                            },
                            {
                                evaluate:2.0,
                                price:9999,
                                oldPrice:12323,
                                delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                                jiGou:'美橙医疗整形美容',
                                num:22
                            },
                            {
                                evaluate:2.0,
                                price:9999,
                                oldPrice:12323,
                                delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                                jiGou:'美橙医疗整形美容',
                                num:22
                            },
                            {
                                evaluate:2.0,
                                price:9999,
                                oldPrice:12323,
                                delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                                jiGou:'美橙医疗整形美容',
                                num:22
                            },
                            {
                                evaluate:2.0,
                                price:9999,
                                oldPrice:12323,
                                delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                                jiGou:'美橙医疗整形美容',
                                num:22
                            },
                            {
                                evaluate:2.0,
                                price:9999,
                                oldPrice:12323,
                                delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                                jiGou:'美橙医疗整形美容',
                                num:22
                            },
                            {
                                evaluate:2.0,
                                price:9999,
                                oldPrice:12323,
                                delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                                jiGou:'美橙医疗整形美容',
                                num:22
                            },


                        ]
                    },
                ],
                list: [
                    {id:1,name:"首页",show:false},
                    {id:2,name:"预约",show:false},
                    {id:3,name:"日记",show:true},
                    {id:4,name:"圈子",show:false},
                    {id:5,name:"粉丝",num:200,show:false},
                    {id:6,name:"关注",num:200,show:false},
                ]

            }
        }
    }
</script>

<style scoped lang="less">
  .mydiary-box{
      width: 260px;
      float: left;
      margin-right: 30px;
      padding-top: 20px;
      img{
          margin-top: 10px;
          width: 262px;
          height: 361px;
      }
      .answer{
          position: absolute;
          height:auto;
          border: 1px  solid #e0e0e0;
          margin-top: 30px;
          width: 262px;
          padding: 0 5px 0 5px;
          .answer-text{
              border-top:1px  solid #e0e0e0;
              >:nth-child(2){
                  >:first-child{
                      background-color: #64b0fc;
                  }
                  >:last-child{
                      color:  #64b0fc;

                  }
              }
              p{
                  padding: 18px 0 0px 0;
                  height: auto;
                  >:first-child{
                      margin-bottom: 15px;
                      float: left;
                      background-color: #fe5471;
                      border-radius: 4px;
                      padding: 5px;
                      color: white;
                      font-size: 14px;
                      margin-left: 0;
                  }
                  >:last-child{
                      margin-bottom: 15px;
                      color: #fe5471;
                      margin-left: 20px;
                      float: left;
                      width: 200px;
                  }
              }
          }
          .answer-title{
              height: 53px;
              line-height: 53px;
              font-size: 18px;
              color: #333333;
              padding-left: 20px;
              span{
                  float: right;
                  color: #ff5172;
                  font-size: 12px;
                  margin-right: 10px;
              }

          }
          .answer-title:before{
              content: '';
              width: 3px;
              height: 22px;
              background-color: #FE5371;
              position: absolute;
              top: 15px;
              left: 5px;
          }
      }
  }
    .mydiary-right{
        width: 890px;
        float: right;
        padding-top: 20px;
        .mydiary-title{
            line-height: 35px;
            border-bottom:2px solid #ff5371;
            color: #ff526e;
            font-size: 18px;
            padding-left: 10px;
        }


    }
    .container{
        padding-bottom: 60px;
    }
</style>